<template>
	<view class="mine-list">
		<view class="item-card margin-border">
			<text class="font-size__20">{{ data.rest || 0 }}</text>
			<text font-size__12>余额</text>
		</view>
		<view class="item-card margin-border">
			<text class="font-size__20">{{ data.discount || 0 }}</text>
			<text font-size__12>优惠券</text>
		</view>
		<view class="item-card margin-border">
			<text class="font-size__20">{{ data.integral || 0 }}</text>
			<text font-size__12>积分</text>
		</view>
		<view class="item-card">
			<text class="font-size__20">{{ data.shopping || 0 }}</text>
			<text font-size__12>购物卡</text>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
defineProps({
	data: {
		type: Object,
		default() {
			return {};
		}
	}
});
</script>

<style scoped lang="scss">
.mine-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	background-color: #fff;
	border-radius: 30rpx;
}
.item-card {
	display: grid;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	justify-content: center;
	margin: 30rpx 0;
}
.margin-border {
	border-right: 1px solid #e6e6e6;
}
.font-size__12 {
	text-align: center;
	font-size: 24rpx;
}
.font-size__20 {
	text-align: center;
	font-size: 40rpx;
}
</style>
